@extends('admin.layout.layout', ['row' => @$page])

@section('contain')
    <style>
        #logModal .table td:first-child{
            background-color: rgba(0, 0, 0, 0.05);
            width: 150px;
            font-weight: bold;
        }
    </style>

    <div class="portlet">
        <div class="portlet-title">
            <div class="caption">
                <x-portlet-breadcrumb :page="$page"></x-portlet-breadcrumb>
            </div>
            <div class="actions">
            </div>
        </div>

        <div class="filter-wrapper">
            <form action="/{{ request()->path() }}/" class="form-inline filter-form">
                <div class=" input-group mb-3 custom-control-inline">
                    <input type="text" class="form-control s-input" name="value" value="{{ request()->input('value') }}" placeholder="{{ ts('LS1') }}">
                </div>
                <x-flatpickr-date-range></x-flatpickr-date-range>
                <div class="mb-3">
                    <button class="btn btn-primary">{{ ts('SEARCH') }}</button>
                    <a href="/{{ request()->path() }}/" class="btn btn-warning">{{ ts('RESET') }}</a>
                </div>

            </form>
        </div>

        <div>
            <table class="table table-s1" data-toggle="table">
                <thead>
                <tr class="order_column">
                    <th>{{ ts('sequence') }}</th>
                    <th>{{ ts('CZZH') }}</th>
                    <th>{{ ts('USERNAME') }}</th>
                    <th>{{ ts('OPERATIONMODULE') }}</th>
                    <th>{{ ts('OPERATIONTYPE') }}</th>
                    <th>{{ ts('CZJL') }}</th>
                    <th>{{ ts('OPERATIONAT') }}</th>
                    <th>{{ ts('OPERATIONs') }}</th>
                </tr>
                </thead>
                <tbody>
                @foreach($data as $k => $v)
                    <tr class="item-list">
                        <td class="text-center">{{ @$data->firstItem()+$k }}</td>
                        <td>{{ @$v->abbr }}</td>
                        <td>{{ @$v->user_name }}</td>
                        <td>{{ @$v->module }}</td>
                        <td>{{ @$v->activity }}</td>
                        <td>{{ @$v->record }}</td>
                        <td>
                            {{ fdate2($v->created_at) }}
                        </td>
                        <td>
                            <button class="btn btn-success btn-sm" onclick="getLog({{ $v->id }})">{{ ts('VIEW') }}</button>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>

            <div class="row my-3">
                <div class="col">
                    {{ $data->appends(request()->input())->links() }}
                </div>
            </div>
            <div class="modal fade" id="logModal">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">模态框头部</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                            <table class="table s3">
                                <tbody>
                                <tr>
                                    <td style="width: 180px;">IP</td>
                                    <td class="td1"></td>
                                </tr>
                                <tr>
                                    <td>{{ ts('USERID') }}</td>
                                    <td class="td2"></td>
                                </tr>
                                <tr>
                                    <td>{{ ts('USERNAME') }}</td>
                                    <td class="td3"></td>
                                </tr>
                                <tr>
                                    <td>{{ ts('GSJC') }}</td>
                                    <td class="td4"></td>
                                </tr>
                                <tr>
                                    <td>{{ ts('OPERATIONMODULE') }}</td>
                                    <td class="td5"></td>
                                </tr>
                                <tr>
                                    <td>{{ ts('OPERATIONTYPE') }}</td>
                                    <td class="td6"></td>
                                </tr>
                                <tr>
                                    <td>{{ ts('CZJL') }}</td>
                                    <td class="td7"></td>
                                </tr>
                                <tr>
                                    <td>{{ ts('xgq') }}</td>
                                    <td class="td8"></td>
                                </tr>
                                <tr>
                                    <td>{{ ts('xgh') }}</td>
                                    <td class="td9"></td>
                                </tr>
                                <tr>
                                    <td>{{ ts('OPERATIONAT') }}</td>
                                    <td class="td10"></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        </div>

                    </div>
                </div>
            </div>

        </div>

    </div>


@endsection

@section('script')
    <script>
        function getLog(id) {
            request.get('/admin/ajax/getLog', {
                params: {
                    id: id
                }
            })
                .then(function(d) {
                    var data = d.data;
                    $('#logModal').find('.td1').text(data.ip);
                    $('#logModal').find('.td2').text(data.user_id);
                    $('#logModal').find('.td3').text(data.user_name);
                    $('#logModal').find('.td4').text(data.abbr);
                    $('#logModal').find('.td5').text(data.module);
                    $('#logModal').find('.td6').text(data.activity);
                    $('#logModal').find('.td7').text(data.record);
                    $('#logModal').find('.td8').text(data.old);
                    $('#logModal').find('.td9').text(data.new);
                    $('#logModal').find('.td10').text(data.created_at);
                    $('#logModal').modal()
                })
        }
    </script>

@endsection